/*
 * @Date: 2022-03-26 13:13:08
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-26 13:35:47
 * @FilePath: \vue3Components\src\components\menu\menu.tsx
 * @Description: something
 */
import { defineComponent, PropType, useAttrs } from 'vue'
import { MenuItem } from './type'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from '../../utils'
export default defineComponent({
  props: {
    data: {
      type: Array as PropType<MenuItem[]>,
      required: true
    },
    defaultActive: {
      type: String,
      default: ''
    },
    router: {
      type: Boolean,
      default: false
    },
    children: {
      type: String,
      default: 'children'
    },
    // 菜单标识的键名
    index: {
      type: String,
      default: 'index'
    }
  },
 setup(props, ctx) {
    let attrs=useAttrs()
    const renderMenu = (data:any[]) => {
      return data.map((item:any) => {
          //处理图标
        item.i = `el-icon-${toLine(item.icon!)}`
        let slots = {
          title: () => {
            return <>
              <item.i />
              <span>{ item.name}</span>
            </>
          }
        }
        //递归子菜单
        if (item.children && item.children.length) {
          return (<el-sub-menu index={item.index} v-slots={slots}>
              {renderMenu(item.children)}
            </el-sub-menu>)
        }
        //无子菜单
        return (<el-menu-item>
          <item.i></item.i>
          <span>{ item.name}</span>
        </el-menu-item>)
      })
    }
    return () => {
      return (<el-menu  class="menu-icon-svg" default-active={props.defaultActive} router={props.router} {...attrs}>{ renderMenu(props.data)}</el-menu>)
  }
  }
})